


<script>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import $ from 'jquery';
import {useStore} from 'vuex'
import router from "@/router/index.js";



export default {
  methods: {
    router() {
      return router
    }
  },
  setup(){
    const store = useStore();
    let username = ref('');
    let password = ref('');
    let confirmedPassword = ref('');
    let email = ref('');
    let tel = ref('');
    let sexType = ref(1);
    let schoolCode = ref(0);
    let userAlias = ref('');
    let error_message = ref('');

    const register = () => {
      $.ajax({
        url: "http://127.0.0.1:8081/user/account/register/",
        type: "POST",
        data: {
          username: username.value,
          password: password.value,
          confirmedPassword: confirmedPassword.value, // 修正变量名
          email: email.value,
          tel: tel.value,
          sexType: sexType.value,
          schoolCode: schoolCode.value,
          userAlias: userAlias.value
        },
        success(resp){
          if(resp.error_message == "success") {
            ElMessage.success("注册成功");
            router.push({name:"login"});
          } else {
            error_message.value = resp.error_message;
          }
        }
      });
    }

    return {
      username,
      password,
      confirmedPassword,
      email,
      tel,
      sexType,
      schoolCode,
      userAlias,
      error_message,
      register
    }
  }

};



</script>

<template>
  <div class="login-container">
    <el-card class="login-card" >
      <h2 class="login-title" >用户注册</h2>
      <el-form :model="form" label-width="80px" @submit.prevent="register">
        <el-form-item label="用户名">
          <el-input v-model="username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="confirmedPassword" type="password" placeholder="请再次输入 密码" />
        </el-form-item>
        <el-form-item label="email">
          <el-input v-model="email"  placeholder="请输入email" />
        </el-form-item>
        <el-form-item label="tel">
          <el-input v-model="confirmedpassword" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="sexType">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学校代码">
          <el-input v-model="schoolCode" placeholder="请输入学校代码" />
        </el-form-item>
        <el-form-item label="用户别名">
          <el-input v-model="useralis" placeholder="请输入用户别名" />
        </el-form-item>
        <div class="error-message">{{error_message}}</div>
        <el-form-item>
          <el-button type="primary" native-type="submit">注册</el-button>
          <el-button @click="router().push({name:'login'})">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-card {
  width: 400px;
  padding: 20px;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}
div.error-message {
  color: red;
}
</style>



